<template>
  <a-directory-tree
    autoExpandParent
    v-model:expandedKeys="expandedKeys"
    v-model:selectedKeys="selectedKeys"
    multiple
    @select="selectedHandler"
    :tree-data="treeData"
  ></a-directory-tree>
</template>


<script lang="ts" setup>
  import type { TreeProps } from 'ant-design-vue';
  import {BasicModal, useModalInner} from '/@/components/Modal';
  import { ref, watch } from 'vue';
  import {TreeData} from './type';
  const activeKey = ref('-1')
  const rowId = ref('');
  //暴露内部方法
  const emit = defineEmits(['update:selectedKeys']);
  const expandedKeys = ref<string[]>([]);
  const selectedKeys = ref<string[]>([]);
  const props = defineProps({
    treeData: { type: Array<TreeData>, default: [] },
    selectedKeys: { type: Array, default: [] },
  });
  const treeData = ref<TreeData[]>([])
  watch(
    () => props.treeData,
    async (val) => {
      try {
        if (val) {
          treeData.value = val
        }
      } catch(err) {
        console.error(err)
      }
    },
    { deep: true, immediate: true }
  );
  function selectedHandler(selectedKeys) {
    emit('update:selectedKeys', selectedKeys)
    console.log("selectedKeys: ", selectedKeys)
  }
</script>